= render ::Layouts::CrudComponent.new(title,
  icon: 'hook',
  count: hooks.size,
  toggle_text: _('Add new webhook'),
  options: { class: 'gl-mt-3' }) do |c|
  - c.with_body do
    - if hooks.any?
      %ul.content-list
        - hooks.each do |hook|
          = render 'shared/web_hooks/hook', hook: hook
    - else
      %span.gl-text-subtle= _('No webhooks enabled. Select trigger events above.')
  - c.with_form do
    = gitlab_ui_form_for @hook, as: :hook, url: url, html: { class: 'js-webhook-form' } do |f|
      = render partial: partial, locals: { form: f, hook: @hook }
      = f.submit _('Add webhook'), pajamas_button: true
      = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-webhook-edit-close gl-ml-2 js-toggle-button' }) do
        = _('Cancel')
